<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_元素溢出</title>
    <style>
        .overflow {
            background-color: lightcoral;
            /* 注意:溢出的前提一定是限制父元素的大小! */
            width: 200px;
            height: 2500px;
            overflow: visible;/* 默认值 溢出可见 */
            overflow: hidden;/* 溢出隐藏 多余的部分直接裁掉 */
            overflow: scroll;/* 无论是否溢出,两个方向都显示拖拽条*/
            overflow: auto;/* 只有溢出的方向才会自动显示拖拽条 */
        }
        .txt {
            background-color: #ff0;
            width: 200px;
            /* 以下三句代码是组合代码,缺一不可! */
            white-space: nowrap; /* 强制文本不换行 */
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 文字溢出替换为省略号 */
        }
    </style>
</head>
<body>
    <div class="txt" title="lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid">
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid atque blanditiis consectetur consequuntur cumque delectus dicta distinctio doloremque eaque eius eligendi enim error est eum fuga fugiat hic id impedit incidunt inventore ipsa ipsum iusto labore laudantium libero magni maiores molestiae nam natus nes
    </div>
    <div class="overflow">
        <img src="3.png">
        <img src="3.png">
        <img src="3.png">
    </div>
</body>
</html>